@import (reference) 'config';
@import (reference) 'icons';

@asset-block-narrow: calc(~"25% - " @padding-main-layout);
@asset-block-wide: calc(~"33.3% - " @padding-main-layout);
@asset-block-wide50: calc(~"50% - " @padding-main-layout);
@asset-block-full: calc(~"100% - " @padding-main-layout);

.asset {
  &__wrapper {
    display: flex;
    align-items: center;
    @media screen and (max-width: 768px) {
      flex-direction: row;
    }
  }
}

.new-asset,
w-asset {
  box-sizing: border-box;
  min-height: 182px;
  transition: all 0.3s;
  box-shadow: @shadow-type-1;
  flex-basis: @asset-block-narrow;
  max-width: @asset-block-narrow;
  @media screen and (max-width: 1300px) {
    flex-basis: @asset-block-wide;
    max-width: @asset-block-wide;
  }
  @media screen and (max-width: 1024px) {
    flex-basis: @asset-block-wide50;
    max-width: @asset-block-wide50;
  }
  @media screen and (max-width: 560px) {
    flex-basis: @asset-block-full;
    max-width: @asset-block-full;
  }

  border-radius: @border-radius;
  background-color: @color-white;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;
  margin: @padding-main-layout /2;

  &:hover {
    transform: translate3d(0,-3px,0);
    box-shadow: @shadow-main-hover;
    z-index: 3;
  }

  & > div {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  &:hover .settings {
    display: flex;
  }

  w-asset-logo {
    margin-right: 7px;
  }

  .hr {
    border: none;
    width: 100%;
    margin: 0 0 8px 0;
    border-bottom: 1px dashed @color-disabled-200;
  }
}

.new-asset {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  span {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: @add-asset-icon;
    background-position: left top;
    background-repeat: no-repeat;
    background-color: @color-white;
  }

  &:hover {
    span {
      background-position: right top;
    }
  }
}

w-asset {
  .asset {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 108px;

    &__wrapper {
      width: 100%;
      cursor: pointer;
      .rating-stars-wrapper {
        margin-top: 8px;
      }
    }

    &__name {
      flex-grow: 0;
      font-weight: 500;
      font-size: 17px;
      display: flex;
      flex-direction: row;
      align-items: center;
      cursor: pointer;
      span {
        word-break: break-all;
      }
      &-wrapper {
        display: flex;
        justify-content: space-around;
      }
    }

    &__balance {
      margin: 0;
      font-weight: normal;
      cursor: pointer;
      padding-top: 15px;

      &-leasing {
        cursor: pointer;
      }

      w-balance > span {
        word-wrap: break-word;
      }
      .decimal {
        font-family: @font-roboto-light;
      }
    }

    &__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    &__middle {
      min-height: 82px;
    }

    &__footer {
      color: @color-basic-500;
      display: flex;
      white-space: nowrap;
      flex-wrap: nowrap;

      .btn-icon {
        display: inline-block;
        margin-top: 10px;
        margin-right: 20px;
        cursor: pointer;
        font-size: 15px;
        transition: .3s;

        &:last-child {
          svg {
            transform: rotate(180deg);
          }
        }

        svg {
          transition: .3s;
          vertical-align: middle;
          margin-right: 6px;
          margin-top: -3px;
          fill: @color-basic-500;
        }

        &:hover {
          color: @color-basic-700;
          svg {
            fill: @color-basic-700;
          }
        }
      }
    }
  }
}

.unpin {
  width: 18px;
  height: 30px;
  cursor: pointer;
  margin-left: 7px;

  span {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: @unpin-asset-icon;
    background-repeat: no-repeat;
    background-position: left top;
  }

  &:hover {
    span {
      background-position: right top;
    }
  }
}

// todo @uIsk - Refactor all tooltips to w-tooltip
.tooltip-holder {
  position: relative;
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover {
    .tooltip.unpin-tooltip {
      display: block;
    }
  }
}

.tooltip.unpin-tooltip {
  top: 5px;
  right: -12px;
  left: auto;
  transform: translate(0, -40px);
  color: @color-white;
  padding: 10px 15px;
  font-family: @font-roboto-regular;
  font-size: 11px;
  line-height: 12px;
  text-transform: none;
  opacity: .8;

  &::after {
    display: none;
  }

  &::before {
    display: block;
    left: calc(100% ~'- 26px');
  }
}
